<template>
  <div class="related-order-box">
    <el-select
      v-model="relatedOrderIds"
      :remote-method="orderList"
      :loading="orderLoading"
      filterable
      multiple
      collapse-tags
      remote
      reserve-keyword
      popper-class="related-order-item global-select-down"
      placeholder="请输入关键词搜索"
      @change="formatOption">
      <el-option
        v-for="item in orderOptions"
        :key="item.id"
        :label="item.orderId"
        :value="item.id" />
    </el-select>
  </div>
</template>
<script>
// import { getrelatedOrder } from '@/api/legal';
import { getList } from '@/api/order';

export default {
  name: 'RelatedOrder',

  props: {
    ids: {
      type: Array,
      default: () => []
    },
    options: {
      type: Array,
      default: () => []
    },
    reservedField: {
      type: [Array, String],
      default: () => ['id', 'orderId']
    }
  },

  data() {
    return {
      relatedOrderIds: [],
      orderOptions: [], // 关联订单
      orderLoading: false,
      optionArr: [],
      cacheLen: 0
    };
  },

  watch: {
    ids(newV) {
      this.relatedOrderIds = newV;
      this.cacheLen = this.relatedOrderIds.length;
    },
    options(newV) {
      this.orderOptions = newV;
      this.optionArr = newV;
    }
  },
  created() {
  },
  methods: {
    async orderList(query) {
      if (query !== '') {
        this.orderLoading = true;
        try {
          const res = await getList(1, 20, { orderId: query });
          this.orderLoading = false;
          this.orderOptions = res.data.items;
        } catch (error) {
          console.log(error);
        }
      } else {
        this.orderOptions = [];
      }
    },

    formatOption(value) {
      const len = value.length;
      // 选中 增加
      if (len > this.cacheLen) {
        // console.log('增加');
        const arr = this.orderOptions.filter(item => item.id === value[len - 1]);
        this.deleteAttr(arr, ...this.reservedField);
        this.optionArr = [...this.optionArr, ...arr];
      } else {
        // 删除
        // console.log('删除');
        this.optionArr = this.optionArr.filter(item => value.includes(item.id));
      }
      this.cacheLen = value.length;
      this.postMessage();
    },
    // 剔除多余字段
    deleteAttr(arr, ...key) {
      arr.forEach(item => {
        Object.keys(item).forEach(e => {
          if (!key.includes(e)) {
            delete item[e];
          }
        });
      });
      // console.time('1');
      // JSON.parse(JSON.stringify(arr, [...key]));
      // console.timeEnd('1');
      // return JSON.parse(JSON.stringify(arr, [...key]));
    },
    postMessage() {
      try {
        const params = {
          relatedOrderIds: this.relatedOrderIds,
          relatedOrderOptions: this.optionArr
        };
        this.$emit('postMessage', params);
      } catch (error) {
        console.log(error);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.related-order-box {
  & ::v-deep {
    .el-tag--info {
      max-width: 100%;
      color: #406EFF;
      background-color: #ecf1ff;
      display: flex;
      align-items: center;
      .el-select__tags-text {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        padding-right: 3px;
      }
      .el-tag__close {
        flex-shrink: 0;
        right: 0;
        top: 1px;
      }
    }
  }
}
</style>
<style rel="stylesheet/scss" lang="scss">
.related-order-item {
  .el-select-dropdown__item {
    font-size: 12px!important;
    .selected {
      font-size: 12px!important;
    }
  }
}
</style>
